<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8"><!--万国码-->
		<title>小米商城</title><!--标题-->
	</head>
	<body style="margin: 0; padding:0;"><!--初始化-->
		<table border="0" width="100%" height="40px" bgcolor="#333" cellspacing="0" cellpadding="0"><!--设置表格属性，顶部导航栏总表格，一行两列-->
			<tr>
				<td>
					<table border="0" cellspacing="0" cellpadding="8px"><!--顶部导航栏左部分导航，一行多列，表格内边距为8像素-->
						<tr align="left" style="font-size: 12px; color: #b0b0b0;"><!--左对齐，字体大小为12像素，颜色#b0b0b0-->
							<td width="100px" align="right">小米商城</td>
							<td>MIUI</td>
							<td>loT</td>
							<td>云服务</td>
							<td>水滴</td>
							<td>金融</td>
							<td>有品</td>
							<td>Select Region</td>
						</tr>
					</table>
				</td>
				<td>
					<table border="0" cellspacing="0" cellpadding="8px" align="right"><!--顶部导航栏右部分导航，一行多列，表格内边距为8像素，右对齐-->
						<tr align="left" style="font-size: 12px; color: #b0b0b0;"><!--左对齐，字体大小为12像素，颜色#b0b0b0-->
							<td>登录</td>
							<td>注册</td>
							<td>消息通知</td>
							<td>
								<img src="img/gwc.PNG" alt="" /><!--购物车图片-->
							</td>
							<td></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<table border="0" cellspacing="0" cellpadding="10px" width="100%" height="100px"><!--设置表格属性-->
			<tr>
				<td width="250px" align="right">
					<a href="https://www.mi.com" title="小米官网"><img src="img/lg.PNG" alt="" /></a><!--用超链接加入logo图片-->
				</td>
				<td>小米手机</td>
				<td>红米</td>
				<td>电视</td>
				<td>笔记本</td>
				<td>盒子</td>
				<td>新品</td>
				<td>路由器</td>
				<td>智能硬件</td>
				<td>服务</td>
				<td>社区</td>
				<td width="400px" align="center">
					<form action="" method="post"><!--用form表单实现搜索框-->
						<input type="text" value="" />
						<input type="button" value="搜索" />
					</form>
				</td>
			</tr>
		</table>
		<table border="0" cellspacing="0" cellpadding="0" width="1226px" height="460px" align="center"><!--设置表格属性，中间主题部分导航总表格-->
			<tr>
				<td width="234px" height="460px" bgcolor="#626262"><!--设置表格属性-->
					<table border="0" cellpadding="10px" style="color: #fff; font-size: 14px;"><!--内嵌一个表格，内边距为10像素，字体样式为14像素，颜色#fff-->
						<tr>
							<td></td><!--空表格，拉开上边距-->
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;手机 电话卡</td><!--内容部分-->
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;电视 盒子</td>
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;笔记本</td>
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;智能 家电</td>
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;健康 家居</td>
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;出行 儿童</td>
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;路由器 手机配件</td>
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;移动电源 插线板</td>
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;耳机 音响</td>
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td>&nbsp;&nbsp;&nbsp;生活 米兔</td>
							<td width="70px" align="right">&gt;</td>
						</tr>
						<tr>
							<td></td><!--空表格，拉开下边距-->
						</tr>
					</table>
				</td>
				<td>
					<a href="https://www.mi.com/mix2s/"><img src="img/zt.jpg" /></a><!--中间主图部分-->
				</td>
			</tr>
		</table>
		<br />
		<table border="0" cellspacing="0" cellpadding="0" width="1226px" height="170px" align="center">
			<tr>
				<td width="234px" height="170px" align="center">
					<img src="img/000.PNG" />
				</td>
				<td align="center">
					<a href="https://item.mi.com/product/10000064.html"><img src="img/001.jpg" /></a>
				</td>
				<td align="center">
					<a href="https://item.mi.com/product/10000080.html"><img src="img/002.jpg" /></a>
				</td>
				<td align="center">
					<a href="https://www.mi.com/mtwatch-2/"><img src="img/003.jpg" /></a>
				</td>
			</tr>
		</table>
		<br />
		<table border="0" cellspacing="0" cellpadding="0" bgcolor="#f5f5f5" width="100%" height="170px">
			<tr>
				<td>
					<table border="0" cellspacing="0" cellpadding="0" width="1226px" height="120px" align="center">
						<tr>
							<td height="70px"></td><!--空表格，拉开距离-->
						</tr>
						<tr>
							<td style="font-size: 20px;">手机</td><!--设置字体大小20像素-->
							<td align="right">查看全部&nbsp;&nbsp;&gt;</td><!--右对齐和特殊符号写法-->
						</tr>
					</table>
					<table border="0" cellspacing="0" cellpadding="0" width="1226px" height="614px" bgcolor="#fff" align="center">
						<tr align="center">
							<td width="240px" rowspan="4"><!--一列占四行-->
								<a href="https://item.mi.com/product/10000084.html"><img src="img/sj0.jpg" width="240px" /></a><!--图片超链接-->
							</td>
							<td>
								<a href="https://item.mi.com/product/10000041.html"><img src="img/sj1.jpg" /></a>
							</td>
							<td>
								<a href="https://item.mi.com/product/10000070.html"><img src="img/sj2.jpg" /></a>
							</td>
							<td>
								<a href="https://item.mi.com/product/10000069.html"><img src="img/sj3.jpg" /></a>
							</td>
							<td>
								<a href="https://item.mi.com/product/10000064.html"><img src="img/sj4.jpg" /></a>
							</td>
						</tr>
						<tr align="center">
							<td height="48px"><p>小米6 4GB+64GB</p><p style="color: red;">2299元</p></td><!--文字部分，中间用段落标签，并设置价钱颜色为红色-->
							<td><p>小米MIX 2全陶瓷尊享版</p><p style="color: red;">4299元</p></td>
							<td><p>小米Note 3 4GB+64GB</p><p style="color: red;">1799元</p></td>
							<td><p>小米5X 4GB+64GB</p><p style="color: red;">1499元</p></td>
						</tr>
						<tr align="center">
							<td>
								<a href="https://item.mi.com/product/6874.html"><img src="img/sj5.jpg" /></a>
							</td>
							<td>
								<a href="https://item.mi.com/product/10000039.html"><img src="img/sj6.jpg" /></a>
							</td>
							<td>
								<a href="https://item.mi.com/product/10000079.html"><img src="img/sj7.jpg" /></a>
							</td>
							<td>
								<a href="https://item.mi.com/product/6697.html"><img src="img/sj8.jpg" /></a>
							</td>
						</tr>
						<tr align="center">
							<td height="48px"><p>红米5A 2GB内存</p><p style="color: red;">599元</p></td>
							<td><p>红米4A 16GB </p><p style="color: red;">549元</p></td>
							<td><p>红米5 2GB+16GB</p><p style="color: red;">799元</p></td>
							<td><p>红米Note 5A 2GB+16GB </p><p style="color: red;">669元</p></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<br />
	</body>
</html>